<template>
  <div class="app-container" >
    <div id="" class="header">
      <div id="" class="title_search">
        <el-input class="search_input" v-model="title" placeholder="关键字"></el-input>
      </div>
      <div class="block">
        <el-date-picker class='search_time'  prefix-icon="" v-model="time" type="datetimerange"
          :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          align="right" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']
          ">
        </el-date-picker>
      </div>

      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button type="primary" icon='el-icon-plus' @click="handleAddRole">添加</el-button>
    </div>


    <el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="id" width='80' prop='id'>
      </el-table-column>
      <el-table-column align="center" label="公司名称" width='' prop='company_name'>
      </el-table-column>
      <el-table-column align="center" label="发票金额" width='150' prop='price'>
      </el-table-column>
      <el-table-column align="center" label="发票编号" width='' prop='invoice_num'>

      </el-table-column>
      <el-table-column align="center" label="开票时间" width='180' prop='invoice_time_str'>
      </el-table-column>
      <el-table-column align="center" label="备注" width='' prop='remark'>
      </el-table-column>
      <el-table-column align="center" width='150' label="操作">
        <template slot-scope="scope">
          <div id="cao_zuo" class="cao_zuo">
            <el-button type="success" size="mini" icon="el-icon-edit" @click="handleEdit(scope)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" class="del" @click="handleDelete(scope)">
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 翻页组件 -->
    <div id="" class="pages">
      <el-pagination background @size-change="size_change" @current-change="current_change" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="count">
      </el-pagination>
    </div>
    <!-- 翻页组件 -->

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'新建'" >
      <el-form ref='addfrom' :rules="rules" :model="role" label-width="100px">

        <el-form-item label="公司名称" prop='company_name'>
          <el-input v-model="role.company_name" placeholder="" />
        </el-form-item>
        <el-form-item label="发票金额" prop='price'>
          <el-input type='number' v-model="role.price" placeholder="" />
        </el-form-item>
        <el-form-item label="发票编号" prop='invoice_num'>
          <el-input v-model="role.invoice_num" placeholder="" />
        </el-form-item>
        <el-form-item label="结算单id">
          <el-input v-model="role.statement_id" placeholder="" />
        </el-form-item>
        <el-form-item label="开票时间">
          <el-date-picker v-model="role.invoice_time" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input class="na_shui" v-model="role.company_num" placeholder="" />
        </el-form-item>
        <el-form-item label="公司电话">
          <el-input type='number' v-model="role.company_tel" placeholder="" />
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="role.company_addr" placeholder="" />
        </el-form-item>
        <el-form-item label="发票类型">
          <el-input v-model="role.invoice_type" placeholder="" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="role.remark" placeholder="" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;margin-bottom: 10px;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" :loading='fullscreenLoading' @click="confirmRole">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    req_fa_piao_list,
    fa_piao_add
  } from '@/api/kai_piao/fa_piao_list'
  import path from 'path'
  export default {
    data() {
      return {
        no_shu_ju:false,
        // loading显示不显示
        fullscreenLoading:false,
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        // 初始化请求页数
        page: 1,
        // 初始化请求条数
        limit: 10,
        // 时间
        time: '',
        // 总条数
        count: 0,
        title: '',
        role: {
          company_name: '',
          price: '',
          invoice_num: '',
          statement_id: '',
          invoice_time: '',
          company_num: '',
          company_tel: '',
          company_addr: '',
          invoice_type: '增值税专用发票',
          remark: ''
        },
        routes: [],
        rolesList: [],
        dialogVisible: false,
        dialogType: 'new',
        checkStrictly: false,
        rules: {
          company_name: [{
            required: true,
            message: '请输入公司名称',
            trigger: 'blur'
          }, ],
          price: [{
            required: true,
            message: '请输入发票金额',
            trigger: 'blur'
          }, ],
          invoice_num: [{
            required: true,
            message: '请输入发票编号',
            trigger: 'blur'
          }, ],
        },
      }
    },
    created() {
      this.get_list()
    },
    methods: {
      // 请求数据
      async get_list() {
        const res = await req_fa_piao_list({
          is_all: 0,
          page: this.page,
          limit: this.limit
        })
        this.rolesList = res.data
        this.count = res.count
      },
      // 点击添加按钮
      handleAddRole() {
        this.dialogType = 'new'
        this.dialogVisible = true

      },
      // 点击编辑按钮
      handleEdit(scope) {
        this.dialogType = 'edit'
        this.dialogVisible = true
      },
      // 点击删除按钮
      handleDelete({
        $index,
        row
      }) {
        this.$confirm('您是否要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.rolesList = this.rolesList.filter(item => {
              if (item.id === row.id) {
                return false
              } else {
                return true
              }
            })

            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
          .catch(err => {

          })
      },

     // 添加.修改事件
     confirmRole() {
       this.fullscreenLoading = true
       // 验证表单
       this.$refs.addfrom.validate(async (value) => {
         // 如果没必填都填了
         if (value) {
           // 如果是new走新建
           if (this.dialogType === 'new') {
             try {
               let res = await fa_piao_add(this.role)
               if (res && res.code === 200) {
                 // 关了loading
                 this.fullscreenLoading = false
                 this.$message({
                   type: 'success',
                   message: res.msg
                 })
                 // 关了loading
                 this.dialogVisible = false
                 this.get_list()
                 // 清空表单
                this.$refs.addfrom.resetFields();
               } else {
                 // 如果没添加成功
                 // 关了loading
                 this.dialogVisible = false
                 this.fullscreenLoading = false
                 this.$message({
                   type: 'warning',
                   message: res.msg
                 })
               }
             } catch {
               this.fullscreenLoading = false
             }

           } else if (this.dialogType === 'edit') {
             // 修改接口
           }
         }else{
            this.fullscreenLoading = false
         }
       })
       // 添加接口
     },
      // 搜索
      async search() {
        var res = await req_fa_piao_list({
          is_all: 0,
          keyword: this.title,
          search_time: this.time ? this.time.join(',') : ''        })
        if (res.data.length > 0) {
          this.rolesList = res.data
        } else {
          this.rolesList = res.data
        }
      },
      // 翻页
      current_change(e) {
        this.page = e
        this.get_list()
      },
      // 一页显示多少条变化事件
      size_change(e) {
        this.limit = e
        this.get_list()
      }
    },
  }
</script>

<style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }

    .permission-tree {
      margin-bottom: 30px;
    }
  }

  .del {
    margin: 0;
  }

  .header {
    display: flex;
    justify-content: flex-start;
  }


  // 翻页组件居中
  .pages {
    display: flex;
    padding-top: 20px;
  }

  .cao_zuo {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }

  .search_time {
    width: 250px;
  }
</style>
